import React, { useState, useEffect, useRef } from 'react';
import styles from './index.less';

export default () => {
  const [courentTime, setCourentTime] = useState();
  const intervalData = useRef();
  const getTime = () => {
    const dt = new Date();
    const y = dt.getFullYear();
    const mt = dt.getMonth() + 1;
    const day = dt.getDate();
    const h = dt.getHours(); // 获取时
    const m = dt.getMinutes(); // 获取分
    const s = dt.getSeconds(); // 获取秒
    const Time = `${y}年${mt}月${day}-${h}时${m}分${s}秒`;
    return Time;
  };
  useEffect(() => {
    const t = setInterval(() => {
      setCourentTime(getTime());
    }, 1000);
    intervalData.current = t;
    return () => {
      clearInterval(intervalData.current);
    };
  }, [intervalData]);
  return (
    <div className={styles.container}>
      <div className={styles.left}></div>
      <div className={styles.center}>可视化监控平台</div>
      <div className={styles.right}>{courentTime}</div>
    </div>
  );
};
